<template>
    <div>
        <el-form :rules="rules" ref="registerForm" :model="registerForm"
                 label-width="100px" :label-position="labelPosition">
            <el-form-item prop="name" label="昵称：">
                <el-input type="text" v-model="registerForm.name" placeholder="请输入昵称"/>
            </el-form-item>
            <el-form-item prop="email" label="邮箱：">
                <el-input type="text" v-model="registerForm.email" placeholder="请输入您的邮箱"/>
            </el-form-item>
            <el-form-item prop="password" label="密码：">
                <el-input type="password" v-model="registerForm.password" placeholder="请输入密码"/>
            </el-form-item>
            <el-form-item prop="confirmPassword" label="确认密码：">
                <el-input type="password" v-model="registerForm.confirmPassword" placeholder="请再次输入密码"/>
            </el-form-item>
            <el-form-item prop="code" label="验证码：">
                <el-input type="text" v-model="registerForm.code" placeholder="点击图片更换验证码"
                          v-enter="registerNow"
                          class="captcha"/>
                <img :src="'data:image/png;base64,'+captchaUrl" @click="fnUpdateCaptcha" class="captchaImg"
                     style="float: right;width: 82px"/>
            </el-form-item>
            <el-form-item prop="username">
                <el-input type="username" v-model="registerForm.username" placeholder="请输入您的自定义账号"/>
            </el-form-item>
        </el-form>
        <el-button type="primary" style="width: 30%;margin: auto;display: block" @click="registerNow">注册</el-button>
    </div>
</template>

<script>
// import {login} from "../../../utils/login";

import {v4}  from 'uuid' // npm install -S uuid
export default {
    name: "register",
    data() {
        return {
            api: this.$store.getters.app.api,
            labelPosition: 'right',      //表单表头对其方向
            captchaUrl: '',    //文件上传路径
            loginServiceApi: this.$store.state.app.loginServiceApi, //登录请求接口头
            registerForm: {             //注册表单数据
                name: '',
                email: '',
                username: '',         //管理员登录可以自定义账号
                password: '',
                confirmPassword: '',
                code: '', // 验证码
                codeUuid: v4(),
            },
            rules: {
                name: [
                    {required: true, message: '请输入昵称', trigger: 'blur'}
                ],
                password: [
                    {required: true, message: '请输入密码', trigger: 'blur'}
                ],
                email: [
                    {required: true, message: '请输入邮箱', trigger: 'blur'}
                ],
                confirmPassword: [
                    {required: true, message: '请再次确认密码', trigger: 'blur'}
                ],
                code: [
                    {required: true, message: '请输入验证码', trigger: 'blur'}
                ]
            }
        }
    },
    //自定义指令
    directives: {
        enter: {
            bind(el, binding) {
                el.addEventListener('keyup', (event) => {
                    if (event.keyCode === 13) {
                        binding.value();
                    }
                });
            },
        },
    },
    async mounted() {
        await this.init();
    },
    methods: {
        async init() {
            await this.fnUpdateCaptcha();
        },
        //获取验证码
        async fnUpdateCaptcha() {
            let resCaptcha = await this.api.user.captcha({uuid:this.registerForm.codeUuid});
            this.captchaUrl = resCaptcha.message;
        },
        //注册
        async registerNow() {
            await this.$refs.registerForm.validate(async data => {
                if (data) {
                    let res = await this.api.user.register(this.registerForm);
                    if (res.code === 200) {
                        this.registerForm.username = this.registerForm.email;
                        let res = await this.api.user.login(this.registerForm);
                        //console.log(res)
                        if (res.code === 200) {
                            const tokenStr = res.data.token.access_token
                            // // 存储token
                            this.api.auth.setToken(tokenStr)
                            this.api.auth.setUserInfo(res.data.user)
                            this.$store.commit("app/setUserInfo", res.data.user)
                            // // 跳转首页
                            let path = this.$route.query.redirect
                            this.$router.replace('/home')
                        } else {
                            this.fnUpdateCaptcha()
                        }
                    } else {
                        this.fnUpdateCaptcha()
                    }
                } else {
                    this.$message.error('请输入所有字段！')
                    return false;
                }
            })
        },
    }
}
</script>

<style scoped>

.loginTitle {
    margin: 0 auto 40px auto;
    text-align: center;
}


.captcha {
    width: auto;
    margin-right: 10px;
}


.captchaImg {
    width: 100px;
}

.loginTitle {
    margin: 0px auto 20px auto;
    text-align: center;
}

.el-form-item__content {
    display: flex;
    align-items: center;
    justify-content: center;
}

::v-deep .el-input {
    position: relative;
    font-size: 14px;
    display: inline-block;
    width: -webkit-fill-available;
}
</style>
